<template>
	<view style="padding: 40rpx; background-color: #f5f5f5;">
		<view style="padding: 40rpx; margin: 80rpx auto; max-width: 600rpx; background-color: #fff; box-shadow: 0 12rpx 24rpx rgba(0,0,0,.1); border-radius: 20rpx; text-align: center;">
			<view style="margin-bottom: 40rpx; font-size: 50rpx; color: #333;">欢迎注册骑手</view>
			<uni-forms ref="form" :modelValue="form" :rules="rules" validateTrigger='blur'>
				<uni-forms-item label="照片" name="avatar" required>
					<uni-file-picker limit="1" :image-styles="imageStyles" :del-icon="false" :disable-preview="true"
						fileMediatype="image" v-model="avatar" @select="handleAvatarUploadSuccess"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item name="username" required>
					<uni-easyinput prefixIcon="person" v-model="form.username" placeholder="请输入账号" style="border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; width: 100%; box-sizing: border-box;"/>
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput prefixIcon="locked" v-model="form.password" placeholder="请输入密码" type="password" style="border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; width: 100%; box-sizing: border-box;"/>
				</uni-forms-item>
				<uni-forms-item name="phone" required>
					<uni-easyinput prefixIcon="phone" v-model="form.phone" placeholder="请输入手机号" style="border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; width: 100%; box-sizing: border-box;"/>
				</uni-forms-item>
				<uni-forms-item name="name" required>
					<uni-easyinput v-model="form.name" placeholder="请输入姓名" style="border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; width: 100%; box-sizing: border-box;"/>
				</uni-forms-item>
				<uni-forms-item name="idNumber" required>
					<uni-easyinput v-model="form.idNumber" placeholder="请输入身份证号" style="border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; width: 100%; box-sizing: border-box;"/>
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex" required>
					<uni-data-checkbox style="position: relative; top: 10rpx;" v-model="form.sex" :localdata="range"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item>
					<button @click="register()" hover-class="button-hover" style="background-color: #26c95a; border-color: #26c95a; height: 80rpx; line-height: 80rpx; color: white; border-radius: 10rpx; margin-top: 30rpx; width: 100%;">注 册</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					role: 'RIDER'
				},
				range: [
					{ text: '男', value: '男' },
					{ text: '女', value: '女' },
				],
				rules: {
					username: {
						rules:[
							{required: true, errorMessage: '请输入账号'},
							{minLength: 3, maxLength: 50, errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符'}
						],
					},
					password: {
						rules:[
							{required: true, errorMessage: '请输入密码'},
							{minLength: 3, maxLength: 50, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'}
						],
					},
					phone: {
						rules:[
							{required: true, errorMessage: '请输入手机号'},
							{length: 11, errorMessage: '请输入正确的手机号'}
						]
					}
				}
			}
		},
		methods: {
			register() {
				this.$refs.form.validate().then(res=>{
					this.$request.post('/register', this.form).then(res => {
						if (res.code === '200') {
							uni.showToast({
								icon: 'success',
								title: '注册成功'
							})
						uni.navigateBack()
						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			handleAvatarUploadSuccess(e) {
				let _this = this
				const filePath = e.tempFilePaths[0]
				uni.uploadFile({
					url: _this.$baseUrl + '/files/upload', //后端接口（默认发送post请求）
					filePath: filePath,
					name: "file", 
					success(res) {
						console.log(res)
						let url = JSON.parse(res.data || '{}').data
						_this.form.avatar = url
					}
				})
			},
		}
	}
</script>

<style>
.button-hover {
	background-color: #20b24a !important;
}
</style>